<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta property="twitter:account_id" content="30870167">
	<title>Photon | CSS 3D Lighting Engine</title>
	<script type="text/javascript" src="http://use.typekit.com/yoe8gdj.js"></script>
	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/base.css">
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/modernizr.js"></script>
	<script src="js/photon.min.js"></script>
	<script src="js/base.js"></script>
	<script type="text/javascript">
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-12900000-8']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	</script>
</head>
<body>

<nav class="primary-menu">
	<h1>Photon</h1>
	<h2>CSS 3D lighting engine</h2>
	<ul>
		<li><a href="index.html" class="current">Examples</a></li>
		<li><a href="docs.html">Documentation</a></li>
		<li><a href="https://github.com/thomasxiii/photon">GitHub Project</a></li>
		<li><a href="js/photon.min.js" class="download-btn">download</a></li>
	</ul>
</nav>

<div class="attasi">
	<a href="http://attasi.com"><img src="images/attasi-logo.png" alt="attasi.com" /></a>
	<a href="http://attasi.com">tom giannattasio</a>
	<a href="https://twitter.com/attasi">@attasi</a>
</div>

<nav class="example-menu">
	<ul>
		<li><a href="#" data-demo="crane" class="crane-thumb current">crane</a></li>
		<li><a href="#" data-demo="map" class="map-thumb">map</a></li>
		<li><a href="#" data-demo="coverflow" class="coverflow-thumb">coverflow</a></li>
	</ul>
</nav>

<div class="toggle">
	<a href="#" id="label-on" class="label-on current">photon on</a>
	<a href="#" id="toggle-btn" class="toggle-btn on">toggle</a>
	<a href="#" id="label-off" class="label-off">photon off</a>
</div>

<div class="scene">
	<div class="crane demo">
		<div class="wing-1a face"></div>
		<div class="wing-1b face"></div>
		<div class="wing-1c face"></div>
		<div class="wing-1d face"></div>

		<div class="wing-2a face"></div>
		<div class="wing-2b face"></div>
		<div class="wing-2c face"></div>
		<div class="wing-2d face"></div>

		<div class="body-1a face"></div>
		<div class="body-1b face"></div>
		<div class="body-1c face"></div>
		<div class="body-1d face"></div>

		<div class="neck-a face"></div>
		<div class="neck-b face"></div>

		<div class="head-a face"></div>
		<div class="head-b face"></div>

		<div class="tail-a face"></div>
		<div class="tail-b face"></div>

		<div class="base-e face"></div>
		<div class="base-f face"></div>
		<div class="base-g face"></div>
		<div class="base-h face"></div>
	</div>

	<ul class="coverflow demo">
		<li class="cover-1 face"><img src="images/cover-1.png" /></li>
		<li class="cover-2 face"><img src="images/cover-2.png" /></li>
		<li class="cover-3 face"><img src="images/cover-3.png" /></li>
		<li class="cover-4 face"><img src="images/cover-4.png" /></li>
		<li class="cover-5 face"><img src="images/cover-5.png" /></li>
		<li class="cover-6 face"><img src="images/cover-6.png" /></li>
	</ul>

	<div class="map">
		<div class="map-cover face"></div>
		<div class="panel-1 face"></div>
		<div class="panel-2 face"></div>
		<div class="panel-3 face"></div>
	</div>
</div>

</body>
</html>